

page {
  box-sizing: border-box;
  ::-webkit-scrollbar{

    width: 0;
    
    height: 0;
    
    color: transparent;
    
    }
    color: #333333;
}

$colors:(
  "blue": #284A6C,
  "lightblue": #DAEDFF,  
  "yellow": #DC9538,
  "fff": #ffffff,
  "999": #999999,
  "666": #666666,
  "333": #333333,
  "000": #000000
);

$sizes: ( 
  "20": 20,
  "22": 22,
  "24": 24,  
  "25": 25,  
  "26": 26,
  "28": 28,
  "30": 30,
  "34": 34,
  "36": 36,
  "38": 38,
  "40": 40,
  "42": 42,
  "44": 44,
  "48": 48,

);

@each $key, $val in $colors {
  .color-#{$key} {
    color: $val;  
  }
}

@each $sizeKey, $sizeVal in $sizes {
  .fs-#{$sizeKey} {
    font-size: $sizeVal * 1rpx;  
  }
}

ul li {
  list-style: none;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-100 {
  width: 100%;
}


.d-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.f-wrap {
  flex-wrap: wrap;
}

.border-bottom {
  border-bottom: 1rpx solid #e9e9e9;
}

$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
);

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
);

@each $jcKey, $jc in $flex-jc {
  .j-#{$jcKey} {
    justify-content: $jc;
  }
}

@each $aiKey, $ai in $flex-ai {
  .a-#{$aiKey} {
    align-items: $ai;
  }
}

.text-center {
  text-align: center;
}

$spacing-types: (
  m: margin,
  p: padding
);

$spacing-directions: (
  t: top,
  r: right,  
  b: bottom,
  l: left
);

$spacing-sizes: (0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

$spacing-base-size: 10rpx;

@each $typeKey, $type in $spacing-types {

  @each $directionsKey, $directions in $spacing-directions {

    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
        #{$type}-#{$directions}: $size * $spacing-base-size
      }
    }
  }
}

@each $typeKey, $type in $spacing-types { 
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size
    }
  }
}